<template>
  <div class="varybig">
    <div class="title">
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/iconPark-people 1@1x.png" alt="">
          <div>客户</div>
        </div>
        <div class="right">xxxx企业</div>
      </div>
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/riFill-contacts-book-fill 1@1x.png" alt="">
          <div>负责人及电话</div>
        </div>
        <div class="right">
          <div class="button">xxxx</div>
          <div>15978456321</div>
        </div>
      </div>
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/riFill-wallet-fill@1x.png" alt="">
          <div>剩余金额</div>
        </div>
        <div class="right">
          <div class="button">xxxx</div>
          <div>元</div>
        </div>
      </div>
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/riFill-price-tag-2-fill 1@1x.png" alt="">
          <div>电价</div>
        </div>
        <div class="right">
          <div class="button">xxxx</div>
          <div>元/度</div>
        </div>
      </div>
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/if-money@1x.png" alt="">
          <div>剩余金额</div>
        </div>
        <div class="right">
          <div class="button">xxxx</div>
          <div>元</div>
        </div>
      </div>
      <div class="alittle">
        <div>
          <img src="../../../../assets//Prepaid/riFill-battery-2-charge-fill@1x.png" alt="">
          <div>今日电量</div>
        </div>
        <div class="right">
          <div class="button">xxxx</div>
          <div>度</div>
        </div>
      </div>
      <div class="hezha">合闸</div>
      <div class="hezha">正常</div>
    </div>
    <div class="tabar">
      <el-tabs v-model="activeName">
        <!-- 今日电度 -->
        <el-tab-pane label="今日电度" name="first">
          <div>
            <span>日期</span>
            <span>
              <el-date-picker
                size="small"
                value-format="yyyy-MM-dd"
                style="width: 200px;margin-left: 15px;"
                v-model="dayvalue"
               type="date"
               placeholder="选择日期">
              </el-date-picker>
            </span>
            <span><button>查询</button></span>
          </div>
          <div class="echarts" ref="tadaydd" style="height: 90%;">
          </div>
        </el-tab-pane>
        <!-- 月度电量 -->
        <el-tab-pane label="月度电量" name="second">
          <div>
            <span>月份</span>
            <span>
              <el-date-picker
                size="small"
                value-format="yyyy-MM-dd"
                style="width: 200px;margin-left: 15px;"
                v-model="monthvalue"
               type="date"
               placeholder="选择日期">
              </el-date-picker>
            </span>
            <span><button>查询</button></span>
          </div>
          <div class="echart" ref="monthdd" style="height: 470px;width: 1182px;">
          </div>
        </el-tab-pane>
        <!-- 实时监控 -->
        <el-tab-pane label="实时监控" name="third">实时监控</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'CallPoliceRoomInformation',

  data() {
    return {
      dayvalue:'',
      activeName: 'first',
      monthvalue:''
    };
  },

  mounted() {
    this.gettime() 
    this.getmonthdd()
    this.gettadaudd()
    
  },

  methods: {
    // 获取今日电镀图表
    gettadaudd() {
      var chartDom = this.$refs.tadaydd
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top:'5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 获取本月电镀图表
    getmonthdd() {
      var chartDom = this.$refs.monthdd
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top:'5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.dayvalue = year + '-' + month + '-' + day
      this.monthvalue=year + '-' + month
    }
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.varybig{
  height: 100%;
}
.title{
  display: flex;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  .alittle{
    display: flex;
    color: #101010 100%;
    margin-right: 30px;
    font-size: 14px;
    img{
      vertical-align: bottom;
    }
    .right{
      margin-left: 10px;
        .button{
        margin-bottom: 15px;
      }
    }
  }
  .hezha{
    width: 88px;
    height: 54px;
    border: 1px solid rgba(129,179,55,1);
    color: rgba(129,179,55,1);
    text-align: center;
    line-height: 54px;
    margin-left: 20px;
  }
}
.tabar{
  height: 87%;
  button{
    width: 60px;
    height: 30px;
    border-radius: 3px;
    color: #fff;
    background-color: #1890ff;
    border: none;
    margin-left: 20px;
  }
}

::v-deep .el-tabs__nav-wrap::after {
    height: 0px;
  }
  ::v-deep .el-tabs--top{
    height: 100%;
  }
  ::v-deep .el-tabs__content{
    height: 90%;
  }
  ::v-deep .el-tab-pane{
    height: 100%;
  }
</style>